<template>
  <div class="page">
    <el-alert
      title="公告：xxxxxxxxxxxxxxxx"
      show-icon
      type="info"
      effect="dark"
      center
    >
    </el-alert>
    <div class="flex-1 main">
      <el-row :gutter="50">
        <el-col
          v-for="item in summaryList"
          :key="item.key"
          :span="6"
          class="block"
        >
          <el-card>
            <router-link
              :to="item.url"
              class="block-inner"
            >
              <svg-icon
                :name="item.icon"
                :color="$cssVar['$--color-primary']"
                size="50"
              />
              <div>
                <div class="title">{{item.title}}</div>
                <div class="number">100</div>
              </div>
            </router-link>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { dataCount } from '@/api/myFiling'
export default {
  data () {
    let i = 1
    return {
      summaryList: [
        {
          key: i++,
          url: '/customer/order',
          icon: 'menu',
          title: '全部报备',
        },
        {
          key: i++,
          url: '/customer/order?status=1',
          icon: 'list-time',
          title: '待平台审核',
        },
        {
          key: i++,
          url: '/customer/order?status=2',
          icon: 'list-time',
          title: '待平台上架',
        },
        {
          key: i++,
          url: '/customer/order?status=3',
          icon: 'list-time',
          title: '待平台上架',
        },
        {
          key: i++,
          url: '/customer/order?status=4',
          icon: 'list-complete',
          title: '采购已完成',
        },
        {
          key: i++,
          url: '/customer/order?status=5',
          icon: 'o-error',
          title: '未通过审核',
        },
        {
          key: i++,
          url: '/customer/order?status=6',
          icon: 'o-error',
          title: '主动取消',
        },
      ],
    }
  },
  created () {
    dataCount()
      .then(result => {

      })
  },
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main {
  max-width: 1200px;
  min-width: 80%;
  margin-top: 50px;
}
.block {
  margin: 25px 0;
}
.block-inner {
  display: flex;
  align-items: center;
  > div {
    margin-left: 20px;
    line-height: 1.8;
    font-size: 16px;
    .number {
      color: red;
      font-size: 1.2em;
      text-decoration: underline;
    }
  }
}
</style>
